<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/sousuo.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
    <style>
        #ul1{
            position: absolute;
            top: 10px;
            left: 27.5%;
            width: 40%;
            overflow: hidden;
            height: 0em;
            transition: height  0.5s;
        }
        #ul1>li{
            background:  rgb(35,74,141);
            padding: 0.5px;
            margin-bottom: 1px;
            border-radius: 3px;
        }
        .foldBt{
            font-family: 宋体;
            font-weight: bold;
            text-align: right;
        }
        #ul1>li:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="total">
        <div style="width: 40%;margin: 0 auto;text-align: center;">
            <div id="div1" class="div1">
                <input type="text" style="width: 90%;" onfocus="f1()" onclick="f1()" onblur="f2()" v-model=keywords @keyup.enter="get"> 
                <button style="float: right;"  @click="get">搜索</button>
                <ul style="list-style-type: none;" id="ul1">
                    <li v-show="history.length==0" style="color: #999999;">
                        暂无搜索记录
                    </li>
                    <li v-for="item in history" @click="choiceHistory(item)">{{item}}</li>
                    <li onclick="f2()" class="foldBt" style="color: #999999;">
                        折叠搜索记录(或者点击搜索框外任意处)
                    </li>
                </ul>
            </div>
        </div >
        <div id="sing">
            <div class="listt">
                <table class="l-table" >
                    <thead>
                        <tr>
                            <th class="w1">
                                <div class="wp" style="text-align: right;">
                                    &nbsp;
                                </div>
                            </th>
                            <th class="w">
                                <div class="wp af0">
                                    歌曲名称
                                </div>
                            </th>
                            <th class="w2">
                                <div class="wp af1">
                                    时长
                                </div>
                            </th>
                            <th class="w3">
                                <div class="wp af2">
                                    歌手
                                </div>
                            </th>
                            <th class="w4">
                                <div class="wp af3">
                                    专辑
                                </div>
                            </th>
                        </tr>
                        <tbody>
                            <tr id="一堆数字" class="even" v-for="(item,i) in temp">
                                <td class="left">
                                    <div class="hd">
                                        <span id="一堆数字的剝几佝" class="ply">
                                            &nbsp;
                                        </span>
                                        <span class="num">{{(page-1)*10+i+1}}</span>
                                    </div>
                                </td>
                                <td class="lba">
                                    <div class="hd1">
                                        <div class="tt" >
                                            <div class="ttc" v-bind:id=i onclick="transportGequMsg(id)">
                                                <span class="txt">
                                                    <a href="./jutigequ.html">
                                                        <b >{{item.name}}</b>
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="hd2">
                                    <span class="u-dur">
                                        {{parseInt(item.duration/60000)}}:{{parseInt((item.duration/1000)%60)}}
                                    </span>
                                </td>
                                <td class>
                                    <div class="text" title="歌手坝">
                                        <span title="歌手坝">
                                            <a href="./jutigeshou.html" hidefocus="true">
                                                {{item.artists[0].name}}
                                            </a>
                                        </span>
                                    </div>
                                </td>
                                <td class="lbz" title="">
                                    <div class="text">
                                        <a href="./zhuanji.html">
                                            {{item.album.name}}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </thead>
                </table>
            </div>
            <div class="pagewhat">
                <ul style="clear: both; text-align: center;">
                    <li style="display: inline-block;">
                        <a href="#none" v-show="page>1" @click="prePage">上一页</a>
                    </li>
                    <li v-for="(item,i) in pageList" style="margin:0 20px; display: inline-block;">
                       <a href="#none"  @click="choicePage(item)" v-bind:class=item==page?"selected":"unselected">
                            {{item}}
                       </a> 
                    </li>
                    <li style="display: inline-block;">
                        <a href="#"  id="changeContent" @click="nextPage">
                            {{msg1}}
                        </a>
                        <!--<a href="#none" @click="nextPage">下一页</a>-->
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <script>
        //改变至下一页
        function changeIdContent(){
            document.getElementById('changeContent').innerHTML="下一页";
        }
        //展开推荐搜索项
        function f1(){
            var b = document.getElementById("ul1");
            b.style.height = 6.7+"em";
        }
        //关闭推荐搜索项
        function f2(){
            var b = document.getElementById("ul1");
            b.style.height = 0+"em";
        }
        function transportGequMsg(i){
            sessionStorage.setItem('songId',c1.temp[i].id); //当前点击歌的id
            console.log(c1.temp[i]);
            var idList = c1.songListByPage[c1.page-1];
            var useList = new Array();
            for(var j = 0;j<idList.length;j++){
                useList.push(idList[j].id);
            }
            sessionStorage.setItem("gequIdList",JSON.stringify(useList));   //id列表
        }
        var c1 = new Vue({
            el:"#total",
            data:{
                msg:"未获取",
                keywords:"",
                songListByPage:[] ,//歌曲数组
                temp:[],    //当前显示的歌曲数组
                nextPageList:[],   //下一页歌曲数组
                pageList:[], //页标
                page:1, //当前选中的页标
                num:10,  //一页的歌曲数量
                history:[],  //历史搜索数组
                msg1:"",
            },
            methods:{
                get:function(){
                    f2();
                    var t = this;
                    if(t.keywords != ""){
                        this.addHistory();
                        changeIdContent();
                        axios.get(
                            "https://autumnfish.cn/search?keywords="+t.keywords+"&type=1&limit=100"
                            ).then(function(response){
                                var r = response.data;
                                t.msg = "已获取";
                                t.page = 1;
                                var len = Math.ceil(r.result.songs.length/t.num);
                                for(var i = 0;i<len;i++){
                                    var l = [];
                                    t.pageList[i] = i+1;
                                    for(var j = 0;j<10&&i*10+j<r.result.songs.length;j++){
                                        l[j] = r.result.songs[i*10+j];
                                    }
                                    t.songListByPage[i] = l;    
                                }
                                t.temp = t.songListByPage[t.page-1];
                                console.log(r.result.songs);
                            },function (err){
                                t.msg = "获取失败";
                            }
                            )
                        }else{
                            t.msg1="还未输入搜索条件";
                        }
                    },
                get2:function(page){
                    var t = this;
                    console.log("11");
                    axios.get(
                        "https://autumnfish.cn/search?keywords="+t.keywords+"&type=1&limit="+t.num+"&offset="+(page-1)*10
                        ).then(function(response){
                            var r = response.data;
                            console.log(r);
                            // console.log("1");
                            t.msg = "已获取";
                            t.songListByPage[page-1] = r.result.songs;
                            t.temp = t.songListByPage[page-1];
                            // if(t.temp==null){
                            //     console.log("2");
                            // }
                            
                    },function (err){
                            // console.log("没了");
                            t.msg = "获取失败";
                    })
                },
                addHistory:function(){
                    if(this.history.length==0){
                        this.history[0] = this.keywords;
                    }else{
                        var i;
                        for(i = 0;i<this.history.length;i++){
                            if(this.history[i] == this.keywords){
                                break;
                            }
                        }
                        if(i == this.history.length){
                            if(this.history.length<5){
                                for(var i = this.history.length;i>0;i--){
                                    this.history[i] = this.history[i-1];
                                }
                                this.history[0] = this.keywords;
                            }else{
                                for(var i = 4;i>0;i--){
                                    this.history[i] = this.history[i-1];
                                }
                                this.history[0] = this.keywords;
                            }
                       }
                    }
                },
                choiceHistory:function(item){
                    this.keywords = item;
                    this.get();
                },
                choicePage:function(pageNum){
                    this.page = pageNum;
                    if( this.songListByPage[this.page-1]==null){
                        this.get2(this.page);
                    }
                    this.temp = this.songListByPage[this.page-1];
                },
                prePage:function(){
                    if(this.page>1){
                        if(this.page-1<this.pageList[0]){
                            this.choicePage(--this.page);
                            this.changePageList(-5);
                        }else{
                            this.choicePage(--this.page);
                        }
                    }
                },
                nextPage:function(){
                    var wenzi = document.getElementById('changeContent').innerText;
                    if(wenzi == "还未输入搜索条件"){
                        return;
                    }else if(this.page+1>this.pageList[this.pageList.length-1]){
                        this.choicePage(++this.page);
                        this.get2(this.page);
                        this.changePageList(5);
                    }else{
                        // console.log("111");
                        this.choicePage(++this.page);
                    }
                },
                changePageList:function(num){
                    for(var i = 0;i<this.pageList.length;i++){
                        this.pageList[i]+=num;
                    }
                }
            }
        })
    </script>
</body>
</html>